<template>
<!-- 大div -->
    <div style="background-color:#DDDDDD;">
        <div class="topbox">
            <div class="insidebox">
                <p style="font-size:18px;margin:10px">
                   {{this.outdata.name}}
                </p>
                <p style="font-size:10px;margin:10px">
                        入店：{{outdata.checkindate}}离店：{{outdata.checkoutdate}}，共{{this.iDays}}晚          
                </p>         
                <p style="margin:10px;padding-left:5px" >
                    <span  v-if="aaa == '0' ">有无烟楼层</span>
                    <span v-if="aaa == '1' ">有无烟房</span>
                    <span v-if="aaa == '2' ">该房可做无烟处理</span>
                    <span v-if="bbb == '0' ">免费wifi</span>
                    <span v-if="bbb == '2' ">收费wifi</span>
                    <span v-if="ccc == '0' ">有窗</span>
                    <span v-if="ccc == '1' ">无窗</span>
                    <span v-if="ccc == '2' ">部分有窗</span>  
                </p>    
            </div>
        </div>
        <div class="topbox2">       
            <p style="font-size:14px;color:orange;margin-bottom:15px">该订单可在{{this.cancelDate.cancel_date}}前免费取消</p>
            <p style="font-size:14px;color:green">您选择了该房型最划算的价格</p>
         <!-- 房间数之流    -->
        </div>
        <div style="margin-top:20px;margin-bottom:2rem">
            <yd-cell-group>
                <yd-cell-item arrow>
                    <span slot="left">房间数： </span>
                    <!-- <span slot="left">{{roomnum}}</span> -->
                    <yd-input disabled slot="right" hdLabel="房间数" ref="roomnum" v-model="roomnum" placeholder="1间" @click.native="show1 = true"></yd-input>
                </yd-cell-item>          
                <yd-cell-item v-for="(item,index) in list" :key="item.index">
                    <span slot="left">入住人：</span>
                    <yd-input slot="right" placeholder="1间填1人姓名" v-model="item.name"></yd-input>
                </yd-cell-item>     
                <yd-cell-item>
                    <span slot="left">联系人： </span>
                    <yd-input slot="right"  type="text" v-model="contact_name" placeholder="联系人姓名" max="23"></yd-input>
                </yd-cell-item>              
                <yd-cell-item>
                    <span slot="left">手机： </span>
                    <yd-input slot="right"  type="tel" v-model="mobile" placeholder="用户接收预定信息" max="23"></yd-input>
                </yd-cell-item>
                <yd-cell-item arrow>
                    <span slot="left">保留到： </span>
                    <yd-input disabled slot="right"  v-model="time" placeholder="17:00" @click.native="show2 = true"></yd-input>
                </yd-cell-item> 
                <yd-cell-item >
                    <span slot="left">发票： </span>
                    <yd-input slot="right" placeholder="请到前台索取发票" disabled></yd-input>
                </yd-cell-item>                
                <div v-html="result"></div>
            </yd-cell-group>
            
            <!-- 弹出框 -->
            <yd-popup v-model="show1" position="bottom" height="30%">
                <yd-cell-group title="请选择房间数">
                    <yd-cell-item type="radio">
                        <span slot="left">1</span>
                        <input slot="right" type="radio" value="1" v-model="roomnum"/>
                    </yd-cell-item>

                    <yd-cell-item type="radio">
                        <span slot="left">2</span>
                        <input slot="right" type="radio" value="2" v-model="roomnum"/>
                    </yd-cell-item>
                    <yd-cell-item type="radio">
                        <span slot="left">3</span>
                        <input slot="right" type="radio" value="3" v-model="roomnum"/>
                    </yd-cell-item>

                    <yd-cell-item type="radio">
                        <span slot="left">4</span>
                        <input slot="right" type="radio" value="4" v-model="roomnum"/>
                    </yd-cell-item>
                    <yd-cell-item type="radio">
                        <span slot="left">5</span>
                        <input slot="right" type="radio" value="5" v-model="roomnum"/>
                    </yd-cell-item>

                    <yd-cell-item type="radio">
                        <span slot="left">6</span>
                        <input slot="right" type="radio" value="6" v-model="roomnum"/>
                    </yd-cell-item>

                    <!-- <yd-cell-item>
                        <span slot="left">选中的值：</span>
                        <span slot="right">{{roomnum}}</span>
                    </yd-cell-item> -->
                </yd-cell-group>
            </yd-popup>
            <!-- 时间弹出框 -->
            <yd-popup v-model="show2" position="bottom" height="30%">
                <yd-cell-group title="请选择预留时间">
                    <yd-cell-item type="radio">
                        <span slot="left">15:00</span>
                        <input slot="right" type="radio" value="15:00" v-model="time"/>
                    </yd-cell-item>

                    <yd-cell-item type="radio">
                        <span slot="left">16:00</span>
                        <input slot="right" type="radio" value="16:00" v-model="time"/>
                    </yd-cell-item>
                    <yd-cell-item type="radio">
                        <span slot="left">17:00</span>
                        <input slot="right" type="radio" value="17:00" v-model="time"/>
                    </yd-cell-item>

                    <!-- <yd-cell-item>
                        <span slot="left">选中的值：</span>
                        <span slot="right">{{time}}</span>
                    </yd-cell-item> -->
                </yd-cell-group>
            </yd-popup>
            <!-- 明细弹出框 -->
            <yd-popup v-model="show3" position="bottom" height="50%">
                <div style="height:100%">
                    <h1 class="detailtitle">金额明细{{sum}}￥</h1>   
                    <div v-for="item in datepriceList" :key="item.index">
                        <p style="padding:10px 15px 15px 20px">{{item.date}}&nbsp;{{roomnum}}间  {{item.guide_price*roomnum/100}}￥</p>
                    </div>
                </div>
            </yd-popup>
        </div>
        <!-- 提交按钮 -->
        <yd-tabbar fixed style="width:100%;padding:0" v-bind:style="styleBot">
            <yd-flexbox style="width:100%">
                <yd-flexbox-item class="total">合计：{{sum}}￥</yd-flexbox-item>
                <yd-flexbox-item class="detail" @click.native="show3 = true">明细^</yd-flexbox-item>
                <yd-flexbox-item class="commit" @click.native="save()">提交订单</yd-flexbox-item>
            </yd-flexbox>      
        </yd-tabbar>
        <!-- 底部导航 -->
    </div>
</template>

<script>
export default {
  name: 'form',
  data () {
    return {
      contact_name: '',
      styleBot: {
        'margin-bottom': '0'
      },
      date_list: [],
      outdata: this.$route.query,
      iDays: '',
      list: [{name: ''}],
      time: '17:00',
      show1: false,
      show2: false,
      show3: false,
      roomnum: '1',
      startTime: '',
      endTime: '',
      datepriceList: [],
      sale_list: [],
      name: '',
      mobile: '',
      typeInfo: '',
      result: '',
      hjson: {},
      cancelDate: '',
      aaa: '',
      bbb: '',
      ccc: '',
      starttimes: '',
      lktimes: '',
      livername: '1'
    }
  },
  mounted: function() {
    var ua = window.navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
      console.log('微信登陆完了调isphone方法')
      this.isPhone(function (result) {
        console.log(result);
      });
      this.styleBot = {
        'margin-bottom': '0'
      };
    } else {
      this.styleBot = {
        'margin-bottom': '1rem'
      };
    }
    console.log(this.$route.query);
    this.iDays = this.DateDiff(this.outdata.checkindate, this.outdata.checkoutdate);
    console.log(this.iDays);
    console.log('idays')
    this.getDates();
    this.load();
  },
  methods: {
    clickHander () {
      const username = this.$refs.username
      console.log(this.$store)
      this.result = `{<br />  valid：${username.valid}，<br />  errorMes：'${username.errorMsg}'，<br />  errorCode：'${username.errorCode}'<br />}`;
    },
    DateDiff (sDate1, sDate2) { // sDate1和sDate2是2006-12-18格式
      var aDate, oDate1, oDate2, iDays
      aDate = sDate1.split('-')
      oDate1 = new Date(aDate[1] + '/' + aDate[2] + '/' + aDate[0]) // 转换为12-18-2006格式
      aDate = sDate2.split('-')
      oDate2 = new Date(aDate[1] + '/' + aDate[2] + '/' + aDate[0])
      iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24) // 把相差的毫秒数转换为天数
      return iDays
    },
    getDate (datestr) {
      var temp = datestr.split('-');
      var date = new Date(temp[0], temp[1] - 1, temp[2]);
      return date;
    },
    getDates () {
      this.startTime = this.getDate(this.outdata.checkindate);
      this.endTime = this.getDate(this.outdata.checkoutdate);
      console.log(this.outdata.checkindate, this.outdata.checkoutdate);
      console.log(this.startTime.getMonth(), this.endTime);
      var arr = this.outdata.checkindate.split('-')
      var starttime = new Date(arr[0], arr[1], arr[2]);
      this.starttimes = starttime.getTime();
      var arrs = this.outdata.checkoutdate.split('-');
      var lktime = new Date(arrs[0], arrs[1], arrs[2]);
      this.lktimes = lktime.getTime();
      console.log(this.starttimes, this.lktimes);
      while (this.starttimes - this.lktimes < 0) {
        var year = this.startTime.getFullYear().toString();
        var month = (this.startTime.getMonth() + 1).toString().length === 1 ? '0' + (this.startTime.getMonth() + 1).toString() : (this.startTime.getMonth() + 1).toString();
        var day = this.startTime.getDate().toString().length === 1 ? '0' + this.startTime.getDate().toString() : this.startTime.getDate().toString();
        // month = parseInt(month) + 1;
        if (month === '00') {
          month = '12'
          year = year - 1
        }
        this.date_list.push(year + '-' + month + '-' + day);
        this.startTime.setDate(this.startTime.getDate() + 1);
        console.log(this.startTime);
        this.starttimes = this.starttimes + 1000 * 60 * 60 * 24;
      }
      console.log('时间');
      console.log(this.date_list);
    },
    load() {
      this.hdAjax({
        url: this.API.getDatPriceList,
        method: 'post',
        data: {
          sale_code: this.outdata.sale_code,
          date_list: this.date_list
        },
        success: (resultData) => {
          this.datepriceList = resultData.data;
          console.log('!~~~~');
          console.log(resultData);
        }
      });
      this.hdAjax({
        url: this.API.findTypeBySaleCode,
        method: 'post',
        data: {
          sale_code: this.outdata.sale_code
        },
        success: (resultData) => {
          this.typeInfo = resultData.data;
          this.hjson = JSON.parse(this.typeInfo.hotel_info_json);
          this.aaa = this.hjson.smoke_room;
          this.bbb = this.hjson.web;
          this.ccc = this.hjson.window;
          console.log(this.aaa);
          console.log(this.hjson);
          console.log('!!!!')
        }
      });
      this.hdAjax({
        url: this.API.findCancelDate,
        method: 'post',
        data: {
          sale_code: this.outdata.sale_code
        },
        success: (resultData) => {
          this.cancelDate = resultData.data;
          console.log(this.cancelDate);
          console.log('~~~~')
        }
      });
    },
    // 下单
    save () {
      this.list.forEach(element => {
        if (element.name == '') {
          this.livername = '0'
        }
      });
      if (this.livername == '0') {
        this.$dialog.alert({mes: '请填写入住人姓名'});
        this.livername = '1'
        return;
      }
      if (this.mobile == '') {
        this.$dialog.alert({mes: '请填写联系人手机号码'})
        return;
      };
      // if (!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(this.mobile))) {
      //   this.$dialog.alert('不是完整的11位手机号或者正确的手机号前七位');
      //   return;
      // }
      for (var i = 0; i < this.datepriceList.length; i++) {
        for (var j = 0; j < this.list.length; j++) {
          this.sale_list.push({name: this.list[j].name, sale_code: this.outdata.sale_code, num: 1, tour_date: this.datepriceList[i].date, pay_fee: this.outdata.guide_price, mobile: this.mobile})
        }
      }
      console.log(this.sale_list);
      console.log('13123123');
      this.hdAjax({
        url: this.API.hotelOrder,
        method: 'post',
        data: {
          name: this.contact_name,
          pay_type: '0',
          mobile: this.mobile,
          pay_fee: this.sum * 100,
          num: this.sale_list.length,
          sale_code: this.outdata.sale_code,
          sale_list: this.sale_list
        },
        success: (resultData) => {
          this.datepriceList = resultData.data;
          console.log(resultData);
          // 下单成功
          var ua = window.navigator.userAgent.toLowerCase();
          if (ua.match(/MicroMessenger/i) == 'micromessenger') {
            location.href = 'http://dlqt.juyouhx.com/huludaoweixin/?#/boutique_pay?orderCode=' + resultData.data.code;
          } else {
            location.href = 'https://dlqt.juyouhx.com/Api/Api/aliPay?wxid=1&type=2&extra_param=98&orderid=' + resultData.data.code;
          }
        }
      });
    }

  },
  watch: {
    roomnum (val) {
      this.list = [];
      for (var i = 0; i < this.roomnum; i++) {
        this.list.push({name: ''});
      }
    }
  },
  computed: {
    sum: function () {
      var sum = 0;
      for (var i = 0; i < this.datepriceList.length; i++) {
        sum = sum + this.datepriceList[i].guide_price * this.roomnum;
      }
      return sum / 100;
    }
  }
}
</script>

<style>
.topbox{
    background-color:#00AAAA;
    width:100%;
    height:3rem;
    padding: 0.5rem 0.2rem 0.2rem 0.2rem;
}
.bottabbar{
  float: left;
  width: 100%;
  height: 50px;
  border-top: 1px solid #bbbbbb;
  z-index: 999;
  padding: 5px 5%;
}
.topbox2{
    background-color:white;
    width:100%;
    height:2rem;
    padding: 0.4rem 0.2rem 0.15rem 0.4rem;
}
.insidebox{
    background-color: white;
    /* margin:0.5rem; */
    width:100%;
    border-radius: 5px;
    height:100%;
    padding: 0.1rem;
}
.commit{
    background-color:orange;
    height:0.8rem;
    padding:0.1rem 0.2rem 0.2rem 0.2rem;
    font-size:22px;
    color:white;
    text-align: center
}
.total{
    background-color:white;
    height:0.8rem;
    padding:0.15rem 0.15rem 0.15rem 0.15rem;
    font-size:15px;
    text-align: center;
    color:#000;
}
.detail{
    background-color:white;
    height:0.8rem;
    padding:0.1rem 0.2rem 0.2rem 0.2rem;
    font-size:10px;
    float:right;
    color:gray;
    text-align: right;
    vertical-align: center
}
.detailtitle{
    font-size:16px;
    padding:20px 20px 20px 20px;
}
</style>